$blue: #4891ed;

.burn-dialog {
	width: 340px;

	.x-dialog-title {
		color: white;
	    background-color: #939ba4;
	}
	
	.x-dialog-content {
		height: 200px;
		display: block;
		position: relative;
		
		.tab {
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			position: absolute;
			display: none;

			&.active {
				display: block;
			}

			input[type="button"] {
				cursor: pointer;
				background-color: white;
				color: $blue;
				border: 1px solid $blue;
			}

			.wrap {
				position: relative;
			}
		}

		.tab-init {
			.message {
				text-align: center;
				margin-top: 75px;
			}
		}

		.tab-error {
			.message {
				display: none;
				margin-top: 60px;
				margin-left: 20px;
				margin-right: 20px;
				line-height: 22px;
				text-align: center;

				&.active {
					display: block;
				}

				.driver {
					color: $blue;
				}
			}
		}

		.tab-burn {
			.burn-wrap {
				height: 80px;
				margin-top: 35px;
			}

			.burn {
				float: left;
				width: 80px;
				height: 80px;
				margin-left: 20px;
				margin-right: 20px;

				&.burning {
					cursor: default;
					border-color: #ccc;
					color: #ccc;
				}
			}

			.message {
				float: left;
				width: 200px;
				height: 80px;
				line-height: 80px;
				text-align: center;
				border: 1px solid #ccc;
				color: red;
			}

			.burn-progress {
				margin-top: 35px;
				ul {
					margin-left: 20px;
					height: 20px;

					li {
						float: left;
						width: 5px;
						height: 20px;
						margin-left: 1px;

						background-color:#ccc;

						&:first-child {
							margin-left: 0;
						}
					}
				}

				&.active {
					li.ins {
						animation: fill 0.3s linear forwards;
						
						@keyframes fill {
							0% {
								opacity: 0;
								background-color: #ccc;
							}
							100%  {
								opacity: 1;
								background-color: green;
							}	
						}
					}
				}
			}
		}
	}
}